<!DOCTYPE html>
<html lang="en">
<head>
    <!--#include file="ssi/head.html"-->
    <meta name="keywords" content="图片转base64">
    <meta name="description" content="图片转base64">
    <title>图片转base64</title>
    <!--#include file="ssi/link.html"-->
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->
    <section class="container margin-bot-l">
      <div class="alert alert-warning margin-bot-ll" role="alert">
        更多图片转base64方法，请参考文章：<a href="https://www.wubin.work/blog/articles/27" target="_blank">线上以及本地图片转base64编码</a>
      </div>
      <h1 class="headline">线上图片转BASE64</h1>
      <form class="form form-horizontal custom-form-1" id="imgurl-form">
        <div class="form-group form-group-lg">
          <label for="imgurl" class="col-sm-2 control-label">请输入图片的URL</label>
          <div class="col-sm-10">
            <input type="text" id="imgurl" placeholder="请输入线上以.jpg、.png、.gif为后缀的格式的图片地址" class="form-control">
          </div>
        </div>
        <button type="submit" class="btn btn-primary btn-lg single-btn">生成base64编码的图片</button>
      </form>
      <textarea class="result-text" id="imgurl-result"></textarea>
    </section>

    <style>
      .file-submit{
        position: relative;
        margin: 30px 0 20px;
      }
      .file-submit input[type="file"] {
        opacity: 0;
        filter: alpha(opacity=0);
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
      .file-submit input[type="file"]:hover + .btn{
        background-color: #286090;
        border-color: #204d74;
      }
      .file-submit .btn{
        width: 50%;
        margin: 20px auto;
        display: block;
      }
    </style>
    <section class="container margin-bot-l">
      <h1 class="headline">本地图片转BASE64</h1>
      <div class="file-submit">
        <input type="file" id="upload">
        <button class="btn btn-primary btn-lg">上传图片</button>
      </div>
      <textarea class="result-text" id="localimg-result"></textarea>
    </section>

    <section class="container">
      <h1 class="headline">线上图片转base64的接口</h1>
      <div class="code-pre">
        <pre><code>// 接口地址
http://api.wubin.work/tool/img2base64?url=填入图片的链接
//备用地址（如被限制，使用反向代理）
http://m.qdxin.cn/appc/getbase64.php?url=填入图片的链接</code></pre>
      </div>
    </section>

    <!--#include file="ssi/footer.html"-->

  <script>
    // 每一页都需要配置的信息
    var pageInfo = {
      toolLogo: 'img/icon-img2base64.png',
      toolName: document.title
    }
  </script>
    <!--#include file="ssi/script.html"-->
    <script src="js/pages/img2base64.js"></script>
</body>
</html>